<template>
    <div style="min-width:829px">
        <div v-if="$route.path == '/qualityReport'">
            <div class="vs-search-box">
                <el-form ref="form" v-search-box-enter :inline="true" :model="paging" label-width="110px">
                    <el-form-item label="查询时间段：">
                        <!-- <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" style="width:300px">
                        </el-date-picker> -->
                        <el-date-picker v-model="paging.date" placeholder="" class="vs-w-300" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <!-- <div class="operation-box clear-float">
                    <el-button style="margin-left:auto;">导出</el-button>
                </div> -->
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%" border :key="0">
                    <el-table-column prop="out_trade_no" label="顾客类型" align="center">
                        <template slot-scope="scope">
                            <div>{{ scope.$index | status }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="drain" label="散客" align="center"></el-table-column>
                    <el-table-column prop="fit" label="普通会员" align="center"></el-table-column>
                    <el-table-column prop="high" label="优质会员" align="center"></el-table-column>
                    <el-table-column prop="plain" label="流失会员" align="center"></el-table-column>
                </el-table>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            bill_time_start: [],
            loading: false,
            paging: {
                date: ''
            },
            tableData: [],
        };
    },
    created() {
        if (this.$route.path == '/qualityReport') {
            this.paging.date = this.$moment().format("YYYY-MM-DD")
            this.handleCurrentChange(1);
        }
    },
    filters: {
        status(index) {
            switch (index) {
                case 0: return '人数'
                case 1: return '人数占比'
                case 2: return '业绩'
                case 3: return '消费次数'
                case 4: return '客单价'
                case 5: return '营收占比'
            }
        }
    },
    methods: {
        async repairGetList() {
            // if (!this.bill_time_start) {
            //     this.bill_time_start = []
            // }
            // this.paging.date_start = this.bill_time_start[0] || ''
            // this.paging.date_end = this.bill_time_start[1] || ''
            let obj = Object.assign({}, this.paging);
            this.loading = true;
            let { code, data } = await this.$Http.qualityUser(obj);
            this.loading = false;
            if (code) {
                this.tableData = data;
                // this.paging.total = data.total;
            }
        },
        reset() {//重置
            this.paging = this.$options.data().paging;
            this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}

.divTable {
    width: 100%;

    div {
        border-bottom: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;

    td {
        border: 1px solid #ebeef5;
        text-align: center;
        height: 32px;
        color: #333333;
        padding: 0 5px;
        font-size: 14px;
    }
}
</style>